<template>
	<view class="other-login-view">
		<view class="login-footer">
			<view class="other-img" v-for="item in footerThirdPartyLogin" :key="item" @click="checkThirdParty(item)">
				<image :src="require(`@/static/images/login/${item}.png`)" mode=""></image>
			</view>
			<!-- #ifdef H5 -->
			<!-- <v-facebook-login v-show="true" ref="facebookLogin" @login="facebookLogin" @logout="facebookLogin"
				version="v17.0" app-id="1653391465136823"></v-facebook-login> -->
			<div id="buttonDiv" v-show="false">
			</div>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import VFacebookLogin from 'vue-facebook-login-component';
	// #endif
	export default {
		components: {
			// #ifdef H5
			VFacebookLogin,
			// #endif
		},
		data() {
			return {
				// 第三方登录
				footerThirdPartyLogin: [
					'facebook',
					'google'
					// , 'tiktok', 'YouTube'
				],
			}
		},
		created() {
			// 获取第三方登录开关配置并使用
			this.$u.post(`/app/h2-sys-config/getConfigKey/list/otherLogin`).then(res=>{
				this.footerThirdPartyLogin = res.data.otherLogin.split(',')
				console.log(this.footerThirdPartyLogin);
			})
		},
		mounted() {
			// #ifdef H5
			try {
				google.accounts.id.initialize({
					client_id: "596617913554-oatanu9kr11hfm32ehqup70kdcjq2l1f.apps.googleusercontent.com",
					callback: () => {
						console.log(arguments);
					}
				});
				google.accounts.id.renderButton(
					document.getElementById("buttonDiv"), {
						theme: "outline",
						size: "large"
					} // customization attributes
				);
				google.accounts.id.prompt(); // also display the One Tap dialog
				console.log(google.accounts);
			} catch (e) {
				//TODO handle the exception
			}
			// #endif
		},
		methods: {
			// 第三方登录
			checkThirdParty(key) {
				switch (key) {
					case 'google':
						this.loginByGoogle()
						break;
					case 'facebook':
						this.loginByFacebook()
						// #ifdef H5
						// https://www.facebook.com/v11.0/dialog/oauth?
						//  client_id={app-id} // Replace with your application’s ID
						//  &scope=openid
						//  &response_type=code
						//  &redirect_uri={"https://www.domain.com/login"}  // Replace with your Redirect URI      
						//  &state={"state123abc"} // Replace with your State param
						//  &code_challenge={"E91k-123k123-115X"} // Replace with your generated code_challenge
						//  &code_challenge_method=S256 // Replace with the method used to generate the code_challenge
						//  $nonce={"123"} // Replace with a randomly generated nonce value
						// window.location.href =
						// 	`https://www.facebook.com/v17.0/dialog/oauth?client_id=1653391465136823&redirect_uri=https://app.lives.mall.h2bms.cn:20026/pages/login/login&state={st=state123abc,ds=123456789}`;
						// #endif
						break;
					default:
						break;
				}
			},
			facebookLogin() {
				console.log(arguments);
			},
			// facebook
			loginByFacebook() {
				// #ifdef H5
				FB.login((response) => {
					if (response.authResponse) {
						console.log('Welcome!  Fetching your information.... ');
						console.log(response);
						this.$emit('success', 'facebook', {
							userId: response.authResponse.userID,
							userToken: response.authResponse.accessToken
						})
						// FB.api('/me', (res) => {
						// 	console.log('Good to see you, ' + res.name + '.');

						// });
					} else {
						console.log('User cancelled login or did not fully authorize.');
					}
				});
				// #endif
				// #ifdef APP-PLUS
				uni.login({
					provider: 'facebook',
					success: (loginRes) => {
						console.log(loginRes, 'loginResloginResloginResloginResloginRes');
						// 登录成功
						if (loginRes.authResult) {
							this.$emit('success', 'facebook', {
								userId: loginRes.authResult.unionid,
								userToken: loginRes.authResult.access_token
							})
						}

						// uni.getUserInfo({
						// 	provider: 'facebook',
						// 	success: (info) => {
						// 		console.log(info, 'infoinfoinfoinfoinfo');
						// 		const data = {
						// 			...info.userInfo,
						// 			name: 'facebook',
						// 			userName: info.userInfo.nickname,
						// 			status: true
						// 		};
						// 		// 获取用户信息成功, info.authResult保存用户信息
						// 	},
						// 	fail: (err) => {
						// 		console.log(err, 'getuserInfo');
						// 	}
						// });
					},
					fail: (err) => {
						console.log(err);
						if (err.code === -2) {
							this.$u.toast(this.$t('login.loginOther.authorization'));
						}
					}
				});
				// #endif
			},
			loginByGoogle() {
				// #ifdef APP-PLUS
				uni.login({
					provider: 'google',
					success: (loginRes) => {
						console.log(loginRes, 66666999);
						// 登录成功
						uni.getUserInfo({
							provider: 'google',
							success: (info) => {
								const data = {
									...info.userInfo,
									name: 'google',
									user: info.userInfo.nickname,
									code: info.userInfo.unionid,
									status: true
								};
								this.$emit('success', 'google', data)
								// 获取用户信息成功, info.authResult保存用户信息
							},
							fail: (err) => {
								console.log(err, 'getUserInfo');
							}
						});
					},
					fail: (err) => {
						console.log(err, 'login');
						if (err.code === -1002) {
							this.$u.toast(this.$t('login.loginOther.authorization'));
						}
						// this.$u.toast(err)
						// 登录授权失败
						// err.code是错误码
					}
				});
				// #endif
				// #ifdef H5

				// gapi.auth2.getAuthInstance().signIn()
				// 	.then((googleUser) => {
				// 		// 用户已成功登录，可以执行其他操作
				// 		var id_token = googleUser.getAuthResponse().id_token;
				// 		console.log('ID Token: ' + id_token);
				// 	})
				// 	.catch((error) => {
				// 		// 登录过程中发生错误
				// 		console.log('登录错误: ' + error);
				// 	});
				window.location.href = 'http://app.lives.mall.h2bms.cn/prod-api/login/google';
				// #endif
				// window.location.href = `http://sys.livesmall.h2bms.cn/prod-api/login/google`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 底部第三方登录
	.login-footer {
		margin-top: 68rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: center;

		.other-img:not(:first-child) {
			margin-left: 36rpx;
		}

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}
</style>